<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ToolsUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- Image and text -->
    <nav class="navbar navbar-dark badge-success">
        <a class="navbar-brand" href="#">
            <img src="/source/img/avatar.jpg" width="30" height="30" class="d-inline-block align-top rounded-circle" alt=""> Bootstrap
        </a>
    </nav>
    <div class="container mt-3">
        <div class="card">
            <div class="card-header">Badge</div>
            <div class="card-body">
                <span class="badge badge-primary">Primary</span>
                <span class="badge badge-purple">Purple</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-danger">Danger</span>
                <span class="badge badge-warning">Warning</span>
                <span class="badge badge-info">Info</span>
                <span class="badge badge-pink">Pink</span>
                <span class="badge badge-secondary">Secondary</span>
                <span class="badge badge-dark">Dark</span>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header">Button</div>
            <div class="card-body">
                <button class="btn btn-white">White</button>
                <button class="btn btn-primary">Primary</button>
                <button class="btn btn-purple">Purple</button>
                <button class="btn btn-success">Success</button>
                <button class="btn btn-danger">Danger</button>
                <button class="btn btn-warning">Warning</button>
                <button class="btn btn-info">Info</button>
                <button class="btn btn-pink">Pink</button>
                <button class="btn btn-secondary">Secondary</button>
                <button class="btn btn-dark">Dark</button>
                <br>
                <br>
                <button class="btn btn-outline-primary">Primary</button>
                <button class="btn btn-outline-purple">Purple</button>
                <button class="btn btn-outline-success">Success</button>
                <button class="btn btn-outline-danger">Danger</button>
                <button class="btn btn-outline-warning">Warning</button>
                <button class="btn btn-outline-info">Info</button>
                <button class="btn btn-outline-pink">Pink</button>
                <button class="btn btn-outline-secondary">Secondary</button>
                <button class="btn btn-outline-dark">Dark</button>
                <br>
                <br>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <br>
                <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
                <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
                <br>
                <br>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-pink active">
                        <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
                    </label>
                    <label class="btn btn-pink">
                        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                    </label>
                    <label class="btn btn-pink">
                        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
                    </label>
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header">Dropdown</div>
            <div class="card-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Action
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropup
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header">Input</div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                </div>

                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <span class="input-group-text" id="basic-addon2">@example.com</span>
                    </div>
                </div>

                <label for="basic-url">Your vanity URL</label>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
                    </div>
                    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">$</span>
                    </div>
                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">With textarea</span>
                    </div>
                    <textarea class="form-control" aria-label="With textarea"></textarea>
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header">Progress</div>
            <div class="card-body">
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" style="width: 100%" aria-valuenow="100"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
        <div class="p-2">
            <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
            <div class="p-3 mb-2 bg-purple text-white">.bg-purple</div>
            <div class="p-3 mb-2 bg-pink text-white">.bg-pink</div>
            <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
            <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
            <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
            <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
            <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
            <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
            <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
            <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
        </div>
    </div>
</body>
<script src="source/js/zone.min.js"></script>
<script src="source/vendor/flat-ui/dist/js/vendor/jquery.min.js"></script>
<script src="source/js/popper.min.js"></script>
<script src="source/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<script>
    Zone.current.fork(
        {
            onInvokeTask: function (parent, current, target, task, apply, args) {
                parent.invokeTask(target, task, apply, args);
                Page.fillView();
            }

        }
    ).run(PageHandle);
</script>

</html>